<template>
  <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from "echarts";
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "200px",
    },
    height: {
      type: String,
      default: "200px",
    },
    propsData: { type: Array, default: [] },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      var signstatis = this.propsData;
      this.chart = echarts.init(document.getElementById(this.id));
      var titles = [],
        signnums = [],
        totals = [];
      signstatis.forEach(function (obj, index) {
        titles.push("第" + (index + 1) + "次签到");
        signnums.push(obj.SignedProsonNum);
        totals.push(obj.TotalProsonNum);
      });
      this.chart.setOption({
        //  backgroundColor: '#344b58',
        //title: {
        //  text: 'statistics',
        //  x: '20',
        //  top: '20',
        //  textStyle: {
        //    color: '#fff',
        //    fontSize: '22'
        //  },
        //  subtextStyle: {
        //    color: '#90979c',
        //    fontSize: '16'
        //  }
        //},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        grid: {
          left: "5%",
          right: "5%",
          borderWidth: 0,
          top: 15,
          bottom: 25,
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          x: "5%",
          top: "5%",
          orient: "vertical",
          textStyle: {
            color: "#90979c",
          },
          data: ["已签到", "总报名人数"],
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#90979c",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              interval: 0,
            },
            data: titles,
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#90979c",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
            },
            splitArea: {
              show: false,
            },
          },
        ],

        series: [
          {
            name: "总报名人数",
            type: "bar",
            barMaxWidth: 35,
            symbolSize: 10,
            symbol: "circle",
            itemStyle: {
              normal: {
                color: "#ddd",
                barBorderRadius: 0,
                label: {
                  show: true,
                  position: "top",
                  formatter(p) {
                    return p.value > 0 ? p.value : "";
                  },
                },
              },
            },
            data: totals,
          },
          {
            name: "已签到",
            type: "bar",
            stack: "total",
            barMaxWidth: 35,
            barGap: "10%",
            barGap: "-100%",
            itemStyle: {
              normal: {
                color: "rgba(96,104,130,1)",
                label: {
                  show: true,
                  textStyle: {
                    color: "#fff",
                  },
                  position: "insideTop",
                  formatter(p) {
                    return p.value > 0 ? p.value : "";
                  },
                },
              },
            },
            data: signnums,
          },

          //{
          //  name: '未签到',
          //  type: 'bar',

          //  itemStyle: {
          //    normal: {
          //      color: 'rgba(191,191,183,1)',
          //      barBorderRadius: 0,
          //      label: {
          //        show: true,
          //        position: 'insideTop',
          //        formatter(p) {
          //          return p.value > 0 ? p.value : ''
          //        }
          //      }
          //    }
          //  },
          //  data: [
          //    200,
          //    160,
          //    300,

          //  ]
          //  },
        ],
      });
    },
  },
};
</script>
